<template>
  <q-header elevated style="height: 58px">
    <q-toolbar class="topbar">
      <div
        class="row justify-between items-center"
        style="width: 100%; height: 100%"
      >
        <div class="row col">
          <!-- <q-btn
            class="q-mx-sm"
            flat
            dense
            round
            icon="menu"
            aria-label="Menu"
            @click="toggleDrawer"
          />-->
          <q-toolbar-title class="q-ml-md">
            <q-img
              src="/icons/logo.png"
              style="width: 86px; height: 28px"
              @click="gotoHome"
            />
          </q-toolbar-title>
        </div>

        <div class="col">
          <search-bar />
        </div>

        <div class="col row justify-end no-wrap">
          <q-btn
            rounded
            icon="mdi-earth"
            text-color="sub"
            no-caps
            :label="
              currentUser
                ? currentUser.languages.length
                : selectedLanguage.length
            "
          >
            <q-popup-proxy>
              <language-selector />
            </q-popup-proxy>
          </q-btn>
          <q-btn
            round
            icon="mdi-publish"
            color="accent"
            flat
            @click="showVideoUploader = true"
          />
          <q-btn round icon="mdi-bell" class="q-mx-sm" text-color="sub">
            <q-popup-proxy>
              <message-box />
            </q-popup-proxy>
          </q-btn>
          <q-btn round>
            <user-menu></user-menu>
            <q-avatar size="36px">
              <img :src="currentUser.avatar" v-if="currentUser.avatar" />
              <q-icon v-else name="mdi-account" color="sub" />
            </q-avatar>
          </q-btn>
        </div>
      </div>
    </q-toolbar>
  </q-header>
  <q-dialog v-model="showLoginDialog">
    <login-view @to-signup="toSignup" @finish="onLoginFinish" />
  </q-dialog>
  <q-dialog
    v-model="showRegisterDialog"
    persistent
    maximized
    transition-show="slide-up"
    transition-hide="slide-down"
  >
    <register-view @to-signin="toSignin" @finish="onRegFinish" />
  </q-dialog>
  <q-dialog
    v-model="showLanguageDialog"
    persistent
    maximized
    transition-show="slide-down"
    transition-hide="slide-up"
  >
    <language-view @finish="onLanguageFinish" />
  </q-dialog>
  <q-dialog
    v-model="showVideoUploader"
    transition-show="fade"
    transition-hide="fade"
    :maximized="isVideoUploaderMaxmized"
    persistent
  >
    <video-uploader
      @minimize="isVideoUploaderMinmized = true"
      @maximize="isVideoUploaderMaxmized = !isVideoUploaderMaxmized"
      @finish="onVideoUploaderFinish"
      :isMaximized="isVideoUploaderMaxmized"
    />
  </q-dialog>
</template>
<script lang="ts">
import { defineComponent, ref, computed, onMounted } from 'vue';
import { useGlobalStore } from 'stores/global-store';
import { useUserStore } from 'stores/user-store';
import Me from 'src/models/Me';
import SearchBar from 'components/searcher/SearchBar.vue';
import LoginView from 'components/login/LoginView.vue';
import RegisterView from 'components/login/RegisterView.vue';
import LanguageView from 'components/login/LanguageSelector.vue';
import VideoUploader from 'components/uploader/VideoUploader.vue';
import UserMenu from './UserMenu.vue';
import MessageBox from 'components/message/MessageBox.vue';
import LanguageConfig from 'src/models/LanguageConfig';
import LanguageSelector from './LanguageSelector.vue';
//import vue router
import { useRouter } from 'vue-router';
export default defineComponent({
  name: 'login-top-bar',
  emits: ['toggleDrawer'],
  components: {
    SearchBar,
    LoginView,
    RegisterView,
    LanguageView,
    UserMenu,
    VideoUploader,
    LanguageSelector,
    MessageBox,
  },
  setup(props, { emit }) {
    const globalStore = useGlobalStore();
    const userStore = useUserStore();
    const router = useRouter();
    const currentUser = computed<Me>(() => userStore.currentUser as any);
    const selectedLanguage = computed<LanguageConfig[]>(
      () => userStore.selectedLanguage
    );
    const searchString = ref('');
    const showLoginDialog = ref(false);
    const showRegisterDialog = ref(false);
    const showLanguageDialog = ref(false);
    const showVideoUploader = computed({
      get() {
        return globalStore.showUploader;
      },
      set(val: boolean) {
        globalStore.showUploader = val;
      },
    });
    const isVideoUploaderMaxmized = ref(false);
    const isVideoUploaderMinmized = ref(false);
    onMounted(() => {
      if (currentUser.value) {
        if (currentUser.value.isFirstLogin) {
          showLanguageDialog.value = true;
          console.log('test');
        }
      }
    });
    return {
      currentUser,
      selectedLanguage,
      searchString,
      showLoginDialog,
      showRegisterDialog,
      showLanguageDialog,
      showVideoUploader,
      isVideoUploaderMinmized,
      isVideoUploaderMaxmized,
      toggleDrawer() {
        emit('toggleDrawer');
      },
      openLoginDialog() {
        showLoginDialog.value = true;
      },
      openRegisterDialog() {
        showRegisterDialog.value = true;
      },
      toSignup() {
        showLoginDialog.value = false;
        showRegisterDialog.value = true;
      },
      toSignin() {
        showLoginDialog.value = true;
        showRegisterDialog.value = false;
      },
      onLoginFinish() {
        showLoginDialog.value = false;
      },
      onRegFinish() {
        showRegisterDialog.value = false;
      },
      onLanguageFinish() {
        showLanguageDialog.value = false;
      },
      onVideoUploaderFinish() {
        showVideoUploader.value = false;
      },
      gotoHome() {
        router.replace({ name: 'Home' });
      },
    };
  },
});
</script>
